<template>
  <div id="jobdetail">
    <van-nav-bar
      title="职位详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="title">
      <van-row type="flex" >
        <van-col span="6">
          <img :src="jobDetail.logo" alt="公司logo" class="logo">
        </van-col>
        <van-col span="18">
          <van-row class="title-line"  type="flex" >
            <van-col span="12">职位名称:&nbsp;{{jobDetail.company}}</van-col>

          </van-row>
          <van-row class="title-line info" type="flex" justify="start" >
                {{jobDetail.cityName}}&nbsp;|&nbsp;{{jobDetail.areaName}}&nbsp;|&nbsp;{{jobDetail.salaryMin}}万-{{jobDetail.salaryMax}}万
          </van-row>
        </van-col>
      </van-row>
    </div>
    <div class="sec desc">
      <div class="top">
        <van-icon class="title-icon" name="records"/>职位描述
      </div>
      <div class="content">
        {{jobDetail.description}}
      </div>
    </div>
    <div class="sec flow">
      <div class="top">
        <van-icon class="title-icon" name="pending-orders"/>面试流程
      </div>
      <div class="content">
        <van-steps :active='-1' direction="vertical">
          <van-step v-for="(step,index) in jobDetail.steps" :key="index">{{step}}</van-step>
        </van-steps>
      </div>
    </div>
    <div class="sec lietou">
      <div class="top">
        <van-icon class="title-icon" name="contact"/>
        猎头信息
      </div>
      <div class="content">
        <van-row type="flex" >
          <van-col span="6">
            <img :src="lietou.avatar" alt="猎头头像" class="logo">
          </van-col>
          <van-col span="18" style="padding: 6px 0">
            <van-row class="title-line" align="start" type="flex" >
            <div class="fl">
              <van-icon name="contact" style="top:2px;"/>&nbsp;{{lietou.realname?lietou.realname:'没有真实姓名'}}

            </div>
            <div class="fl" style="margin-left:15px">
              <van-icon name="phone" style="top:2px;"/> <a :href="'tel:'+lietou.mobile" style="color:#999">&nbsp;{{lietou.mobile||'对不起，电话未知'}}</a>
            </div>
            </van-row>


            <van-row class="title-line info" type="flex" justify="start" >
              <van-icon name="free-postage" style="top:2px;"/><a :href="'mailto:'+lietou.email" style="color:#999">&nbsp;{{lietou.email||'对不起，对方邮箱未知'}}</a>
            </van-row>
            <van-row class="title-line info" type="flex" justify="start" >
              擅长领域：{{lietou.areas?lietou.areas.split('#').join(' '):'对方没有擅长领域'}}
            </van-row>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="content span"></div>
    <van-goods-action class="action">
      <van-goods-action-mini-btn icon="chat" text="联系" @click="contact" />
      <!-- <van-goods-action-mini-btn icon="cart" text="" @click="onClickMiniBtn" /> -->
      <van-goods-action-big-btn style="background:#F0247F" text="添加人选" @click="$router.push('/addRes')"/>
      <van-goods-action-big-btn :disable="faved" ref="collection"  :style="faved?'background:#666666':'background:#89DEFF'" :text="faved?'已收藏':'加入收藏'" @click="addFav" />
      <van-goods-action-big-btn style="background:#F0747F" text="推荐人选" @click="sugPeople" primary />
    </van-goods-action>
    <!-- <div class="bottom">
      <van-row>
        <van-col span="12">
          <van-button bottom-action size='small'>按钮</van-button>
        </van-col>
        <van-col span="12">
          <van-button type="primary·" bottom-action>按钮</van-button>
        </van-col>
      </van-row>
    </div> -->
  </div>
</template>
<script>
// import { Loading } from 'element-ui';
import Config from './project.config.js'
export default {
  data(){
    return{
      jobDetail:{
        logo: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2621562835,4093398165&fm=58',
        pname: '测试标题',
        steps:[
        ]
      },
      lietou: {
        id: '',
        username: "未知用户名",
        realname: "未知姓名",
        role: 1,
        company: "未知公司",
        gender: 1,
        mobile: "",
        wechat: null,
        email: "",
        password: null,
        point: 95193,
        avatar: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2621562835,4093398165&fm=58',
        areas: null,
        functions: null,
        status: 68486,
        createTime: "2018-07-01 23:15:06"
      },
      faved: false
    }
  },
  computed:{
    
  },
  methods:{
    checkFav(){
      this.$http.get(Config.baseUrl + '/api/user/collection/check/'+this.jobDetail.id).then(function(rsp){
        this.faved = rsp.data
      },function(){
        this.faved = false
      })
    },
    getLietou(){
      this.$http.get(Config.baseUrl + '/api/user/' + this.jobDetail.lietouId).then(
      function(response){
        console.log(response)
        if(response.data.code == 1){
          this.lietou = response.data.data

        }
      },
      function(error){

      }
    )
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    sugPeople(){
      this.$router.push({name: 'myresumelist',query:{posId: this.$route.query.id}})
    },
    addFav(){
      if(this.faved){
        this.$toast.fail('已经收藏过了哦~')
      }else{
        this.$http.post(Config.baseUrl + '/api/user/collect/' + this.jobDetail.id).then(
          function(rsp){
            if(rsp.data.code == 1){
              this.$toast.success('收藏成功～')
              this.faved = true
            }else{
              this.$toast.fail('收藏失败，'+rsp.data.message)
            }
          },
          function(error){

          }
        )
      }
    },
    contact(){
      this.$router.push({name:'dialog',params:{id: this.jobDetail.lietouId,avatar:this.lietou.avatar}})
    }
  },
  mounted(){
    this.$store.commit('hideTab')
    // console.log(this.$route.params.id)
    console.log(this.$route.query.id)
    this.$http.get(Config.baseUrl + '/api/position/' + this.$route.query.id).then(
      function(response){
        console.log(response)
        if(response.data.code == 1){
          this.jobDetail = response.data.data
          this.checkFav()
          try{
            this.jobDetail.steps = response.data.data.interview.split('#')
          }catch(error){
            console.log('得到空的面试流程')
          }
          this.getLietou()
        }
      },
      function(error){

      }
    )

  },
  created(){
  }
}
</script>

<style lang="stylus" scoped>
.fl{
  float left
}
.content.span{
  height: 80px
  width:100%
}
.action{
  z-index: 999;
}
.logo{
  width 60px
  height 60px
  margin 10px 0  10px 10px
}
.title-icon{
  top 2px
  margin-right 5px
}

.sec{
  padding 8px 8px
  margin-top 12px
  background white
}
.sec .top{
  border-bottom solid 1px #f2f2f2
  padding-bottom 5px
}
.info{
  color #5d5d5d

}
.log{
  height 75px
  width 75px
}
.title-line{
  height 37px
  // display flex
  // align-items center

}
.title{
  padding 8px 8px
  background white
}
.lietou{
  margin-bottom 20px
}
.desc .content{
  font-size 16px
  color #333333

}
.lietou .logo{
  height: 60px
  width:60px
}
.lietou .content{
padding-top 5px
}
.lietou .title-line{
  height:25px
}
</style>

